import { ref } from 'vue';
import {
  ElAutocomplete,
  ElCascader,
  ElCheckbox,
  ElCheckboxGroup,
  ElColorPicker,
  ElDatePicker,
  ElInput,
  ElInputNumber,
  ElInputTag,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRate,
  ElSelect,
  ElSlider,
  ElTimePicker,
  ElTransfer,
  ElTreeSelect,
} from 'element-plus';
import { useForm } from '@/components/ProForm';
import InputNumber from '@/components/InputNumber';

export interface IFormData {
  name: string;
  // 深层属性
  attrs: {
    age: number;
    sex: 1 | 2;
    phone: string;
    framework?: string;
    fav?: string;
    check?: string[];
    date?: string;
    dateTime?: string;
    tags?: string[];
    radio?: string;
    rate?: number;
    slider?: number;
    time?: string;
    tree?: '';
    color?: '';
    trans?: string[];
  };
}
const options = [
  { value: 1, label: '男' },
  { value: 2, label: '女' },
  { value: 0, label: '保密' },
];
const frameworks = [
  { value: 'vue3', label: 'vue3', key: 'vue3' },
  { value: 'react', label: 'react', key: 'react' },
  { value: 'vue2', label: 'vue2', key: 'vue2' },
];
const casOptions = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
];
export const useFormConfig = () => {
  // 表单数据
  const formData = ref<IFormData>({
    name: '奥德彪 v-focus-select 指令聚焦选中',
    attrs: {
      age: 20,
      sex: 1,
      phone: '',
      framework: '',
      fav: '',
      check: [],
      date: '',
      dateTime: '',
      tags: [],
      radio: '',
      rate: 3,
      slider: 30,
      time: '',
      tree: '',
      color: '',
      trans: [],
    },
  });
  // 表单配置
  const { formConfig } = useForm<IFormData>(() => [
    {
      prop: 'name',
      label: '名称',
      render(row) {
        return <ElInput v-model={row.name} v-focus-select />;
      },
    },
    {
      prop: 'attrs.age',
      label: '年龄',
      required: true,
      rules: { required: true, message: '年龄为必填', trigger: ['change', 'blur'] },
      hidden: false,
      render(row) {
        return <InputNumber v-model={row.attrs.age} clearable v-focus />;
      },
    },
    {
      prop: 'attrs.age',
      label: '年龄',
      render(row) {
        return <ElInputNumber v-model={row.attrs.age} />;
      },
    },
    {
      prop: 'attrs.phone',
      label: '手机',
      required: true,
      rules: { required: true, message: '手机为必填', trigger: ['change', 'blur'] },
      render(row) {
        return <ElInput v-model={row.attrs.phone} />;
      },
    },
    {
      prop: 'attrs.sex',
      label: '性别',
      required: true,
      rules: { required: true, message: '性别为必填', trigger: ['change'] },
      renderLabel({ label }) {
        return label;
      },
      // renderError({ error }) {
      //   return <span>必填{error}</span>;
      // },
      render(row) {
        return (
          <ElSelect v-model={row.attrs.sex} clearable>
            {options.map((v) => {
              return <ElOption key={v.value} label={v.label} value={v.value} />;
            })}
          </ElSelect>
        );
      },
    },
    {
      prop: 'attrs.framework',
      label: '框架',
      render(row) {
        const handleSelect = (v: string) => console.log(v);
        const fetchSuggestions = (queryString: string, cb: any) => {
          cb([...frameworks]);
        };
        return (
          <ElAutocomplete
            v-model={row.attrs.framework}
            clearable
            onSelect={(v) => handleSelect(v.value)}
            fetchSuggestions={fetchSuggestions}
          />
        );
      },
    },
    {
      prop: 'attrs.fav',
      label: '级联',
      render(row) {
        return <ElCascader v-model={row.attrs.fav} options={casOptions} props={{ multiple: true }} />;
      },
    },
    {
      prop: 'attrs.radio',
      label: '单选框',
      render(row) {
        return (
          <ElRadioGroup v-model={row.attrs.radio}>
            {frameworks.map((v) => {
              return <ElRadio key={v.value} label={v.label} value={v.value}></ElRadio>;
            })}
          </ElRadioGroup>
        );
      },
    },
    {
      prop: 'attrs.check',
      label: '多选框',
      render(row) {
        return (
          <ElCheckboxGroup v-model={row.attrs.check} max={2}>
            {frameworks.map((v) => {
              return <ElCheckbox key={v.value} label={v.label} value={v.value}></ElCheckbox>;
            })}
          </ElCheckboxGroup>
        );
      },
    },
    {
      prop: 'attrs.date',
      label: '日期',
      render(row) {
        return <ElDatePicker v-model={row.attrs.date} type="date" />;
      },
    },
    {
      prop: 'attrs.dateTime',
      label: '日期时间',
      render(row) {
        return <ElDatePicker v-model={row.attrs.dateTime} type="datetime" />;
      },
    },
    {
      prop: 'attrs.tags',
      label: '标签',
      render(row) {
        return <ElInputTag v-model={row.attrs.tags} placeholder="按 Enter 输入" />;
      },
    },
    {
      prop: 'attrs.rate',
      label: '评分',
      render(row) {
        return <ElRate v-model={row.attrs.rate} />;
      },
    },
    {
      prop: 'attrs.slider',
      label: '滑块',
      render(row) {
        return <ElSlider v-model={row.attrs.slider} />;
      },
    },
    {
      prop: 'attrs.time',
      label: '时间',
      render(row) {
        return <ElTimePicker v-model={row.attrs.time} />;
      },
    },
    {
      prop: 'attrs.tree',
      label: '树形',
      render(row) {
        return <ElTreeSelect v-model={row.attrs.tree} data={casOptions} />;
      },
    },
    {
      prop: 'attrs.color',
      label: '颜色',
      render(row) {
        const predefineColors = [
          '#00ced1',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577',
        ];
        return <ElColorPicker v-model={row.attrs.color} show-alpha predefine={predefineColors} />;
      },
    },
    {
      prop: 'attrs.trans',
      col: { xl: 18, lg: 18, md: 18, xs: 18 },
      label: '穿梭',
      render(row) {
        return <ElTransfer v-model={row.attrs.trans} data={frameworks} />;
      },
    },
  ]);
  return {
    formData,
    formConfig,
  };
};
